<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  lang="zh-CN"
>
<head>
  <title>监管设备管理</title>
</head>
<body>
<div
  layout:fragment="content"
  id="app" v-cloak
>
  <div class="myTabs">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="基本信息" name="first">
        <div class="myHeader">
          <div class="myHeader-title">
            监控设备信息
          </div>
        </div>
        <div>
          <table
            width="100%"
            border="0"
            class="el-table el-table--border"
            cellspacing="0"
            cellpadding="0"
          >
            <tbody>
            <tr>
              <td>所在机房<span style="color: red">*</span></td>
              <td>
                <el-select
                  v-model="form.houseId"
                  v-validate="'required'"
                  name="houseId"
                  :map="houseMap"
                  default-value="所在机房"
                >
                  <el-option v-for="[key,val] in houseMap" :key="key" :label="val" :value="key"></el-option>
                </el-select>
                <div
                  id="houseId_message"
                  class="msg"
                >
                  <span class="field-error" v-show="errors.has('houseId:required')">请选择所在机房</span>
                </div>
              </td>
            </tr>
            <tr>
              <td
                width="100"
                nowrap=""
              >监测设备名称<span style="color: red">*</span>
              </td>
              <td>
                <el-input
                  maxlength="50"
                  show-word-limit
                  name="spotType"
                  v-model="form.deviceName"
                  v-validate="'required|max:50'"
                  placeholder="请输入监测设备名称"
                ></el-input>
                <div
                  id="spotType_message"
                  class="msg"
                >
                  <span class="field-error" v-show="errors.has('spotType:required')">请填写监测设备名称</span>
                  <span class="field-error" v-show="errors.has('spotType:max')">监测设备名称长度最大为 50 位</span>
                </div>
              </td>
            </tr>
            <tr>
              <td
                width="100"
                nowrap=""
              >设备IP或主机名<span style="color: red">*</span>
              </td>
              <td>
                <el-input
                  maxlength="50"
                  name="spotIp"
                  v-model="form.hostName"
                  v-validate="'required|max:50'"
                  placeholder="请输入设备IP或主机名"
                  show-word-limit
                ></el-input>
                <div
                  id="spotIp_message"
                  class="msg"
                >
                  <span class="field-error" v-show="errors.has('spotIp:required')">请填写设备IP或主机名</span>
                  <span class="field-error" v-show="errors.has('spotIp:max')">设备IP或主机名长度最大为 50 位</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>控制端口<span style="color: red">*</span></td>
              <td>
                <el-input
                  maxlength="6"
                  name="port"
                  v-model="form.ctrPort"
                  v-validate="'required|numeric|max:6'"
                  placeholder="请输入控制端口"
                  show-word-limit
                ></el-input>
                <div
                  id="port_message"
                  class="msg"
                >
                  <span class="field-error" v-show="errors.has('port:required')">请填写控制端口</span>
                  <span class="field-error" v-show="errors.has('port:numeric')">{{ errors.first('port') }}</span>
                  <span class="field-error" v-show="errors.has('port:max')">控制端口长度最大为 6 位</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>管理用户名<span style="color: red">*</span></td>
              <td>
                <el-input
                  maxlength="50"
                  name="user"
                  v-model="form.adminUser"
                  v-validate="'required|max:50'"
                  placeholder="请输入管理用户名"
                  show-word-limit
                ></el-input>
                <div
                  id="user_message"
                  class="msg"
                >
                  <span class="field-error" v-show="errors.has('user:required')">请填写管理用户名</span>
                  <span class="field-error" v-show="errors.has('user:max')">管理用户名长度最大为 50 位</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>管理密码<span style="color: red">*</span></td>
              <td>
                <el-input
                  maxlength="50"
                  name="pass"
                  v-model="form.adminPassword"
                  v-validate="'required|max:50'"
                  placeholder="请输入管理密码"
                  show-word-limit
                ></el-input>
                <div
                  id="pass_message"
                  class="msg"
                >
                  <span class="field-error" v-show="errors.has('pass:required')">请填写管理密码</span>
                  <span class="field-error" v-show="errors.has('pass:max')">管理密码长度最大为 50 位</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>瞬时流量</td>
              <td>

                <el-input
                  name="inFlow"
                  v-model="form.transientInput"
                  v-validate="'checkTransientMax|checkTransientFloat'"
                >
                  <template slot="prepend">进口</template>
                </el-input>
                <div
                  id="inFlow_message"
                  class="msg"
                >
                  <span class="field-error"
                        v-show="errors.has('inFlow:checkTransientMax')">瞬时流量 进口 不含小数位，长度最大为 11 位</span>
                  <span class="field-error"
                        v-show="errors.has('inFlow:checkTransientFloat')">瞬时流量 进口 必须是整数或小数，小数示例：1.34</span>
                </div>
                <br>
                <el-input
                  name="outFlow"
                  v-model="form.transientOutput"
                  v-validate="'checkTransientMax|checkTransientFloat'"
                >
                <template slot="prepend">出口</template>
                </el-input>
                <div
                  id="outFlow_message"
                  class="msg"
                >
                  <span class="field-error"
                        v-show="errors.has('outFlow:checkTransientMax')">瞬时流量 出口 不含小数位，长度最大为 11 位</span>
                  <span class="field-error" v-show="errors.has('outFlow:checkTransientFloat')">瞬时流量 出口 必须是整数或小数，小数示例：1.34</span>
                </div>
              </td>
            </tr>
            <tr>
              <td>接入方式<span style="color: red">*</span></td>
              <td>

                <el-select
                  v-model="form.connectType"
                >
                  <el-option v-for="[key,val] in fieldFormatter.baseMonitorDevice.connectTypeMap" :key="key" :label="val" :value="key"></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>链路状态<span style="color: red">*</span></td>
              <td>
                <el-select
                  v-model="form.linkStatus"
                >
                  <el-option v-for="[key,val] in fieldFormatter.baseMonitorDevice.linkStatusMap" :key="key" :label="val" :value="key"></el-option>
                </el-select>
              </td>
            </tr>
            </tbody>
          </table>
          <div align="center">
            <el-button
              type="primary"
              @click="update"
            >确定
            </el-button>
            <el-button
              @click="_forward('basic-data/admin_monitor_device')"
            >返回
            </el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="监控配置" name="second">
        <div class="myHeader">
          <div class="myHeader-title">
            设备监测配置
          </div>
        </div>
        <table
          width="100%"
          border="0"
          class="el-table el-table--border"
          cellspacing="0"
          cellpadding="0"
        >
          <tbody>
          <tr>
            <td
              width="150"
              class="TitleTD"
            >管理IP地址
            </td>
            <td class="ContentTD">
              <el-input
                v-model="form.adminIp"
                v-validate="'ip'"
                name="manageip"
                placeholder="请输入管理IP地址，设备不对管理IP监控"
              ></el-input>
              <div
                id="manageip_message"
                class="msg"
              >
                <span class="field-error" v-show="errors.has('manageip:ip')">{{ errors.first('manageip') }}</span>
              </div>
            </td>
          </tr>
          <tr>
            <td
              width="150"
              class="TitleTD"
            ></td>
            <td class="ContentTD">
              <table
                width="100%"
                border="0"
                class="el-table el-table--border"
                cellspacing="0"
                cellpadding="0">
                <thead>
                  <tr>
                    <td>起始地址</td>
                    <td>结束地址</td>
                    <td>
                      <el-button
                        type="primary"
                        @click="addBaseMonitorDevIpSeg()"
                        size="mini"
                      >添加
                      </el-button>
                    </td>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item,index) in form.baseMonitorDevIpSegList">
                    <td style="vertical-align: top">
                      <el-input
                        v-model="item.startIp"
                        v-validate="`required|ip|checkNoInclude:${index}|checkSameNetworkSegment:${item.startIp || ''},${item.endIp|| ''}|checkStartLessThanEnd:${item.startIp|| ''},${item.endIp|| ''}`"
                        :name="'startIp'+index"
                        placeholder="起始地址"
                      ></el-input>
                      <div>
                        <span class="field-error" v-if="errors.has('startIp'+index+':required')">不能空</span>
                        <span class="field-error" v-if="errors.has('startIp'+index+':ip')">地址格式错误</span>
                        <span class="field-error" v-else-if="errors.has('startIp'+index+':checkNoInclude')">该地址已被包含</span>
                        <span class="field-error" v-else-if="errors.has('startIp'+index+':checkSameNetworkSegment')">需要在同一网段</span>
                        <span class="field-error" v-else-if="errors.has('startIp'+index+':checkStartLessThanEnd')">起始地址需要小于等于结束地址</span>
                      </div>
                    </td>
                    <td style="vertical-align: top">
                      <el-input
                        v-model="item.endIp"
                        v-validate="`required|ip|checkNoInclude:${index}`"
                        :name="'endIp'+index"
                        placeholder="结束地址"
                      ></el-input>
                      <div>
                        <span class="field-error" v-if="errors.has('endIp'+index+':required')">不能空</span>
                        <span class="field-error" v-else-if="errors.has('endIp'+index+':ip')">地址格式错误</span>
                        <span class="field-error" v-else-if="errors.has('endIp'+index+':checkNoInclude')">该地址已被包含</span>
                      </div>
                    </td>
                    <td style="vertical-align: top">
                      <el-button
                        type="danger"
                        @click="deleteBaseMonitorDevIpSeg(null,index)"
                        size="mini"
                      >删除
                      </el-button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="myHeader">
          <div class="myHeader-title">
            阻断页面设置
          </div>
        </div>
        <table
          width="100%"
          border="0"
          class="el-table el-table--border"
          cellspacing="0"
          cellpadding="0"
        >
          <tbody>
          <tr>
            <td
              width="150"
              class="TitleTD"
            >阻断方式
            </td>
            <td class="ContentTD">
              <el-select
                v-model="form.interceptType"
              >
                <el-option v-for="[key,val] in fieldFormatter.baseMonitorDevice.interceptTypeMap" :key="key"
                           :label="val" :value="key"></el-option>
              </el-select>
            </td>
          </tr>
          <tr
            v-if="form.interceptType === 3 || form.interceptType === 4"
          >
            <td class="TitleTD">阻断后跳转URL：</td>
            <td class="ContentTD">
              <el-input
                v-model="form.interceptContent"
                id="block_redirect"
                name="block_redirect"
                placeholder="请填写阻断后跳转URL"
              ></el-input>
            </td>
          </tr>
          <tr
            v-if="form.interceptType === 2"
          >
            <td class="TitleTD">提示页面HTML：</td>
            <td colspan="8">
												<textarea
                          v-model="form.interceptContent"
                          id="block_message"
                          name="block_message"
                          rows="10"
                          cols="80"
                          title="请填写提示页面HTML，内容不允许超过2048字符"
                        >&lt;html&gt;&lt;head&gt;&lt;title&gt;系统屏蔽页&lt;/title&gt;&lt;/head&gt;
								&lt;body&gt;
								&lt;b&gt;尊敬的用户您好：&lt;/b&gt; &lt;br /&gt;
								您访问的网站被安全系统屏蔽，有可能是以下原因造成：&lt;br /&gt;
								1、您的网站未备案，或者原备案号被注销。&lt;br /&gt;
								2、域名被列入访问黑名单。&lt;br /&gt;
								3、其它违法违规造成的域名屏蔽。
								&lt;/body&gt;
								&lt;/html&gt;</textarea>
              <div
                id="block_message_message"
                class="msg"
              >请填写提示页面HTML，内容不允许超过2048字符
              </div>
            </td>
          </tr>
          </tbody>
        </table>
        <div align="center">
          <el-button
            type="primary"
            @click="updateAndIpList"
          >确定
          </el-button>
          <el-button
            @click="_forward('basic-data/admin_monitor_device')"
          >返回
          </el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="运行情况" name="third">
        <div class="myHeader">
          <div class="myHeader-title">
            运行状态
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="refreshServerInfo"
            ></el-button>
          </div>
        </div>

        <table
          width="100%"
          border="0"
          class="el-table el-table--border"
          cellspacing="0"
          cellpadding="0"
        >
          <tr>
            <td
              width="150"
              class="TitleTD"
            >CPU主频信息
            </td>
            <td class="ContentTD">{{(form.serverInfo.cpuInfo || {}).cpuMhz}}</td>
          </tr>
          <tr>
            <td class="TitleTD">流量分析器</td>
            <td class="ContentTD">{{form.serverInfo.networkStream}}</td>
          </tr>
          <tr>
            <td class="TitleTD">监测网卡</td>
            <td class="ContentTD"></td>
          </tr>
          <tr>
            <td class="TitleTD">机房编号</td>
            <td class="ContentTD">{{form.houseId}}</td>
          </tr>
          <!--<tr>
            <td class="TitleTD">授权编号</td>
            <td class="ContentTD">FBB2C474-10D44FCB-C90F97DA-D34E0E02</td>
          </tr>-->
          <tr>
            <td class="TitleTD">同步状态</td>
            <td class="ContentTD">
              <span
                style="color: green;"
              ></span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">应用状态</td>
            <td class="ContentTD">
              {{form.serverInfo.appStatus === '1' ? '正常运行': '状态异常'}}
            </td>
          </tr>
          <tr>
            <td class="TitleTD">内存信息</td>
            <td class="ContentTD">
              <table
                width="100%"
                align="center"
                class="el-table el-table--border"
                border="0"
                cellspacing="0"
              >
                <tbody>
                <tr>
                  <td class="TitleTD1">总大小</td>
                  <td class="TitleTD1">可用大小</td>
                  <td class="TitleTD1">已用大小</td>
                  <td class="TitleTD1">使用率</td>
                </tr>
                <tr>
                  <td>{{(form.serverInfo.memoryInfo||{}).totalSize}}MB</td>
                  <td>{{(form.serverInfo.memoryInfo||{}).freeSize}}MB</td>
                  <td>{{(form.serverInfo.memoryInfo||{}).usedSize}}MB</td>
                  <td>{{Math.floor((form.serverInfo.memoryInfo||{}).usedRate*100)}}%</td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">内存使用率</td>
            <td class="redtext">{{Math.floor((form.serverInfo.memoryInfo||{}).usedRate*100)}}%</td>
          </tr>
          <tr>
            <td class="TitleTD">瞬时流量</td>
            <td class="ContentTD">{{form.serverInfo.networkStream}}Mbs</td>
          </tr>
          <tr>
            <td class="TitleTD">磁盘信息</td>
            <td class="ContentTD">
              <table
                width="100%"
                align="center"
                border="0"
                class="el-table el-table--border"
                cellspacing="0"
              >
                <thead>
                <tr>
                  <td class="TitleTD1">磁盘</td>
                  <td class="TitleTD1">总空间</td>
                  <td class="TitleTD1">可用空间</td>
                  <td class="TitleTD1">使用率</td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="{devName,totalSize,availableSize,usedPercent} in form.serverInfo.diskInfoList">
                  <td>{{devName}}</td>
                  <td>{{totalSize}}GB</td>
                  <td>{{availableSize}}GB</td>
                  <td>{{usedPercent}}%</td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </table>
      </el-tab-pane>
    </el-tabs>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/component/BaseValidateVue.js"></script>
  <script src="/static/js/module/basic-data/model/BaseMonitorDevice.js"></script>
  <script src="/static/js/module/basic-data/model/BaseServerInfo.js"></script>
  <script src="/static/js/module/basic-data/model/MemoryInfo.js"></script>
  <script src="/static/js/module/basic-data/model/DiskInfo.js"></script>
  <script src="/static/js/module/basic-data/model/CpuStatistic.js"></script>
  <script src="/static/js/module/basic-data/model/ServerInfo.js"></script>
  <script src="/static/js/module/basic-data/model/BaseMonitorDevIpSeg.js"></script>
  <script src="/static/js/module/basic-data/api/baseMonitorDeviceApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseMonitorDevIpSegApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <!--<script src="/static/js/module/basic-data/common/admin_monitor_device_common.js"></script>-->
  <script src="/static/js/module/basic-data/modify/admin_monitor_device_modify.js"></script>
</div>
</body>
</html>
